import React, { useEffect, useRef, useState } from 'react';
import './Welcome.less'
import * as API from '../api/zz'
import ReactECharts from '../../node_modules/echarts-for-react';
import { CoffeeOutlined, TagsOutlined, TrademarkOutlined, UserSwitchOutlined, VideoCameraAddOutlined } from '@ant-design/icons';
const Welcome = () => {
  // 用户数据
  const [user, setUser] = useState([])
  // 用户姓名
  const [userName, setUserName] = useState([])
  // 用户登录次数
  const [userDeng, setUserDeng] = useState([])
  // 作品
  const [userWork, setUserWork] = useState([])
  // 标签
  const [userTAG, setUserTAG] = useState([])
  // 问题数据
  const [Wengti, setWeng] = useState([])
  // 全部商品
  const [Shangping, setShangping] = useState([])
  // 商品销售额度
  const [Shan, setShan] = useState([])
  const [Zuoping, setZuoping] = useState<{ [key: string]: string }[]>()//获取全部商品

  useEffect(() => {
    // 用户数据接口
    API.getShop().then((res) => {
      console.log(res.data.data);

      setUser(res.data.data)
      // 用户姓名
      let f = res.data.data.map((item: any, index: number) => {
        return item.name
      })
      console.log(f);
      let G = res.data.data.map((item: any, index: number) => {
        return item.coot
      })
      console.log(G);
      setUserDeng(G.splice(0, 20))
      setUserName(f.splice(0, 20))
    })
    // 作品
    API.getUserList({ tyName: '全部' }).then((res) => {

      setUserWork(res.data.data)
      let shai = res.data.data.reduce((prev: any[], next: any, index: any, brr: any) => {
        if (prev.indexOf(next.worklabel) === -1) {
          prev.push(next.worklabel);
        }
        return prev;
      }, []);
      setUserTAG(shai)
    })
    // 商品
    API.SHangqingList().then((res) => {

      setShangping(res.data.data)
      console.log(res.data.data);
      let shul = res.data.data.map((item: any, index: number) => {
        return { value: Number(item.shop_sold), name: item.shop_headline + Number(item.shop_sold) }
      })
      console.log(shul);
      shul.sort((a: any, b: any) => {
        return b - a
      })
      console.log(shul);

      setShan(shul)

    })
    // 问题
    API.getWengti().then((res) => {
      res.data.data.forEach((item: any, index: number) => {
        item.answerer = JSON.parse(item.answerer);
      });
      setWeng(res.data.data);
    });

  }, [])
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['登录次数', '', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: userName,
        axisPointer: {
          type: 'shadow'
        },
        axisLabel: {
          interval: 0,
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '登录次数',
        min: 0,
        max: 100,
        interval: 15,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '登录次数',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value: number) {
            return value + ' ml';
          }
        },
        data: userDeng
      },
      {
        name: '',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value: number) {
            return value + ' ml';
          }
        },
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
        ]
      },

    ]
  };

  const optionter = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: '类型',
        type: 'pie',
        radius: [50, 150],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 12
        },
        data: [
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '二次元'
            })).length, name: '二次元' + (userWork.filter((item: any, index) => {
              return item.workgenre === '二次元'
            })).length
          },
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '游戏'
            })).length,
            name: '游戏' + (userWork.filter((item: any, index) => {
              return item.workgenre === '游戏'
            })).length
          },
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '影视'
            })).length
            , name: '影视' + (userWork.filter((item: any, index) => {
              return item.workgenre === '影视'
            })).length
          },
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '文学'
            })).length, name: '文学' + (userWork.filter((item: any, index) => {
              return item.workgenre === '文学'
            })).length
          },
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '绘画'
            })).length, name: '绘画' + (userWork.filter((item: any, index) => {
              return item.workgenre === '绘画'
            })).length
          },
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '摄影'
            })).length, name: '摄影' + (userWork.filter((item: any, index) => {
              return item.workgenre === '摄影'
            })).length
          },
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '设计'
            })).length, name: '设计' + (userWork.filter((item: any, index) => {
              return item.workgenre === '设计'
            })).length
          },
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '人文'
            })).length, name: '人文' + (userWork.filter((item: any, index) => {
              return item.workgenre === '人文'
            })).length
          },
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '娱乐'
            })).length, name: '娱乐' + (userWork.filter((item: any, index) => {
              return item.workgenre === '娱乐'
            })).length
          },
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '生活'
            })).length, name: '生活' + (userWork.filter((item: any, index) => {
              return item.workgenre === '生活'
            })).length
          },
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '旅行'
            })).length, name: '旅行' + (userWork.filter((item: any, index) => {
              return item.workgenre === '旅行'
            })).length
          },
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '视频'
            })).length, name: '视频' + (userWork.filter((item: any, index) => {
              return item.workgenre === '视频'
            })).length
          },
          {
            value: (userWork.filter((item: any, index) => {
              return item.workgenre === '时尚'
            })).length, name: '时尚' + (userWork.filter((item: any, index) => {
              return item.workgenre === '时尚'
            })).length
          },
        ]
      }
    ]
  };
  const optionGWC = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: '类型',
        type: 'pie',
        radius: [50, 150],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 12
        },
        data: Shan.splice(0, 10)
      }
    ]
  };


  return (
    <div>
      <div className='title'>
        <p style={{ background: '#ff9a9a' }}>
          <span>{user.length}</span><br />
          用户数量
          &nbsp;&nbsp;&nbsp;<UserSwitchOutlined />
        </p>
        <p style={{ background: '#a3e134' }}>
          {userWork.length}<br />
          全部作品
          &nbsp;&nbsp;&nbsp;<VideoCameraAddOutlined />
        </p>
        <p style={{ background: 'rgb(157, 119, 225)' }}>
          {userTAG.length}<br />
          标签类型数量
          &nbsp;&nbsp;&nbsp;<TagsOutlined />
        </p>
        <p style={{ background: 'rgb(52, 193, 225)' }}>
          {Wengti.length}<br />
          问题数量
          &nbsp;&nbsp;&nbsp;<CoffeeOutlined />
        </p>
        <p>
          {Shangping.length}<br />
          当前商品数量
          &nbsp;&nbsp;&nbsp;<TrademarkOutlined />
        </p>
      </div>
      <div className='box' >
        <ReactECharts option={option} />
      </div>
      <div className='bottom'>
        <div className='dubu'>
          <h2>标签类型数量</h2>
          <ReactECharts style={{ height: "500px", padding: '20px' }} option={optionter} />
        </div>
        <div>
          <h2>商品销售数量</h2>
          <ReactECharts style={{ height: "500px", padding: '20px' }} option={optionGWC} />
        </div>
      </div>

    </div>);
};

export default Welcome;
